<%@ page import="com.ws.ssmzongjie3.util.Res" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台用户列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
    <style>
        .cus-container {
            width: 100%; /* 宽度自动适应页面 */
            margin: 0 auto; /* 居中显示 */
        }
        .table {
            font-size: 14px; /* 缩小表格字体 */
        }
        .table th, .table td {
            padding: 8px; /* 缩小单元格内边距 */
        }
    </style>
</head>
<body>
    <div class="container cus-container">
        <div>
            <!-- 搜索框 -->
            <div id="search-houuser" style="float: left; margin: 10px 0px;">
                <form class="form-inline" action="${pageContext.request.contextPath}/houuser/list" method="get">
                    <div class="form-group">
                        <label for="searchInput">用户名</label>
                        <input type="text" name="username" class="form-control" id="searchInput" value="${param.username}">
                    </div>
                    <div class="form-group">
                        <label for="searchNickname">昵称</label>
                        <input type="text" name="nickname" class="form-control" id="searchNickname" value="${param.nickname}">
                    </div>
<%--                    <div class="form-group">--%>
<%--                        <label for="searchRole">角色</label>--%>
<%--                        <select name="role" id="searchRole" class="form-control">--%>
<%--                        </select>--%>
<%--                    </div>--%>
                    <button type="submit" class="btn btn-default">查询</button>
                    <button type="button" class="btn btn-default" onclick="clearSearch()">清空</button>
                </form>
            </div>

            <!-- 操作按钮 -->
            <div style="float: right; margin: 10px 0px;">
                <a class="btn btn-primary" href="${pageContext.request.contextPath}/houuser/add">添加用户</a>
                <a class="btn btn-primary" onclick="deleteSelected()">删除选中</a>
            </div>
        </div>

        <!-- 数据表格 -->
        <table class="table table-bordered clearfix" id="houuser-list">
            <thead>
                <tr class="bg-primary">
                    <th><input type="checkbox" id="selectAll"></th>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>头像</th>
                    <th>所属商家</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <c:forEach var="user" items="${pageInfo.list}">
                    <tr>
                        <td><input type="checkbox" name="id" value="${user.acl_user_id}"></td>
                        <td>${user.acl_user_id}</td>
                        <td>${user.username}</td>
                        <td>${user.nickname}</td>
                        <td><img src="<%=Res.fileUrl%>${user.acl_user_avatar}" width="50" height="50" alt="头像"></td>
                        <td>
                            <c:choose>
                                <c:when test="${user.sid == 0}">
                                    顽石公司
                                </c:when>
                                <c:otherwise>
                                    ${user.business.business_name}
                                </c:otherwise>
                            </c:choose>
                        </td>

                        <td>
                            <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/acl_role/role?acl_user_id=${user.acl_user_id}">分配角色</a>&nbsp;

                            <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/houuser/huixian?acl_user_id=${user.acl_user_id}">编辑</a>
                            <a class="btn btn-default btn-sm" href="${pageContext.request.contextPath}/houuser/delete?acl_user_id=${user.acl_user_id}">删除</a>
                        </td>
                    </tr>
                </c:forEach>
            </tbody>
        </table>

        <!-- 分页导航 -->
        <div>
            <nav style="float: left;">
                <ul class="pagination">
                    <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                        <a href="${pageContext.request.contextPath}/houuser/list?currentPage=1&pageSize=${pageInfo.pageSize}&username=${param.username}&nickname=${param.nickname}" aria-label="First">
                            <span aria-hidden="true">首页</span>
                        </a>
                    </li>
                    <li class="${pageInfo.pageNum == 1 ? 'disabled' : ''}">
                        <a href="${pageContext.request.contextPath}/houuser/list?currentPage=${pageInfo.pageNum - 1}&pageSize=${pageInfo.pageSize}&username=${param.username}&nickname=${param.nickname}" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <c:set var="startPage" value="${pageInfo.pageNum - 4}" />
                    <c:if test="${startPage < 1}">
                        <c:set var="startPage" value="1" />
                    </c:if>
                    <c:set var="endPage" value="${startPage + 9}" />
                    <c:if test="${endPage > pageInfo.pages}">
                        <c:set var="endPage" value="${pageInfo.pages}" />
                        <c:if test="${endPage - startPage + 1 < 10}">
                            <c:set var="startPage" value="${endPage - 9}" />
                            <c:if test="${startPage < 1}">
                                <c:set var="startPage" value="1" />
                            </c:if>
                        </c:if>
                    </c:if>
                    <c:forEach begin="${startPage}" end="${endPage}" var="i">
                        <li class="${i == pageInfo.pageNum ? 'active' : ''}">
                            <a href="${pageContext.request.contextPath}/houuser/list?currentPage=${i}&pageSize=${pageInfo.pageSize}&username=${param.username}&nickname=${param.nickname}">${i}</a>
                        </li>
                    </c:forEach>
                    <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                        <a href="${pageContext.request.contextPath}/houuser/list?currentPage=${pageInfo.pageNum + 1}&pageSize=${pageInfo.pageSize}&username=${param.username}&nickname=${param.nickname}" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    <li class="${pageInfo.pageNum == pageInfo.pages ? 'disabled' : ''}">
                        <a href="${pageContext.request.contextPath}/houuser/list?currentPage=${pageInfo.pages}&pageSize=${pageInfo.pageSize}&username=${param.username}&nickname=${param.nickname}" aria-label="Last">
                            <span aria-hidden="true">尾页</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <div style="float: right; margin-top: 25px;">
                <span>当前第${pageInfo.pageNum}页/共${pageInfo.pages}页，共${pageInfo.total}条数据</span>
                每页显示
                <select name="pageSize" onchange="changePageSize(this.value)">
                    <option value="5" <c:if test="${pageInfo.pageSize == 5}">selected</c:if>>5</option>
                    <option value="10" <c:if test="${pageInfo.pageSize == 10}">selected</c:if>>10</option>
                    <option value="15" <c:if test="${pageInfo.pageSize == 15}">selected</c:if>>15</option>
                    <option value="20" <c:if test="${pageInfo.pageSize == 20}">selected</c:if>>20</option>
                </select>条数据
            </div>
        </div>
    </div>

<%--    <!-- 添加模态框 -->--%>
<%--    <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel">--%>
<%--        <div class="modal-dialog" role="document">--%>
<%--            <div class="modal-content">--%>
<%--                <h3 class="text-center">添加用户</h3>--%>
<%--                <form id="addForm">--%>
<%--                    <div class="form-group">--%>
<%--                        <label for="username">用户名</label>--%>
<%--                        <input type="text" class="form-control" id="username" name="username">--%>
<%--                    </div>--%>
<%--                    <div class="form-group">--%>
<%--                        <label for="password">密码</label>--%>
<%--                        <input type="password" class="form-control" id="password" name="password">--%>
<%--                    </div>--%>
<%--                    <div class="text-center">--%>
<%--                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>--%>
<%--                        <button type="button" class="btn btn-primary" onclick="save()">保存</button>--%>
<%--                    </div>--%>
<%--                </form>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>

<%--    <!-- 编辑模态框 -->--%>
<%--    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel">--%>
<%--        <div class="modal-dialog" role="document">--%>
<%--            <div class="modal-content">--%>
<%--                <h3 class="text-center">编辑用户</h3>--%>
<%--                <form id="editForm">--%>
<%--                    <input type="hidden" id="editId" name="id">--%>
<%--                    <div class="form-group">--%>
<%--                        <label for="editUsername">用户名</label>--%>
<%--                        <input type="text" class="form-control" id="editUsername" name="username">--%>
<%--                    </div>--%>
<%--                    <div class="form-group">--%>
<%--                        <label for="editPassword">密码</label>--%>
<%--                        <input type="password" class="form-control" id="editPassword" name="password">--%>
<%--                    </div>--%>
<%--                    <div class="text-center">--%>
<%--                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>--%>
<%--                        <button type="button" class="btn btn-primary" onclick="update()">保存</button>--%>
<%--                    </div>--%>
<%--                </form>--%>
<%--            </div>--%>
<%--        </div>--%>
<%--    </div>--%>


    <script>
    // 改变每页显示条数
    function changePageSize(pageSize) {
        // 获取当前页码
        var currentPage = ${pageInfo.pageNum};
        // 保留当前页码，而不是跳转到第一页
        window.location.href = "${pageContext.request.contextPath}/houuser/list?currentPage=" + currentPage + "&pageSize=" + pageSize + "&u_name=${param.u_name}&u_sex=${param.u_sex}&u_email=${param.u_email}&u_phone=${param.u_phone}";
    }
    </script>

<%--    <script>--%>
<%--        // 获取数据--%>
<%--        function getData() {--%>
<%--            $.ajax({--%>
<%--                url: "${pageContext.request.contextPath}/houuser/list",--%>
<%--                type: "POST",--%>
<%--                dataType: "json",--%>
<%--                success: function(result) {--%>
<%--                    var tr = "";--%>
<%--                    for (var i = 0; i < result.length; i++) {--%>
<%--                        var item = result[i];--%>
<%--                        tr += '<tr>';--%>
<%--                        tr += '<td><input type="checkbox" name="id" value="' + item.id + '"></td>';--%>
<%--                        tr += '<td>' + item.id + '</td>';--%>
<%--                        tr += '<td>' + item.u_name + '</td>';--%>
<%--                        tr += '<td>' + item.u_sex + '</td>';--%>
<%--                        tr += '<td>' + item.u_email + '</td>';--%>
<%--                        tr += '<td>' + item.u_phone + '</td>';--%>
<%--                        tr += '<td><a class="btn btn-default btn-sm" onclick="openEditModal(' + item.id + ')">编辑</a>&nbsp;';--%>
<%--                        tr += '<a class="btn btn-default btn-sm" onclick="deleteItem(' + item.id + ')">删除</a></td>';--%>
<%--                        tr += '</tr>';--%>
<%--                    }--%>
<%--                    $('#houuser-list tbody').html(tr);--%>
<%--                }--%>
<%--            });--%>
<%--        }--%>

<%--        // 打开添加模态框--%>
<%--        function openAddModal() {--%>
<%--            $("#addModal").modal({ show: true });--%>
<%--        }--%>

<%--        // 保存数据--%>
<%--        function save() {--%>
<%--            $.ajax({--%>
<%--                url: "${pageContext.request.contextPath}/houuser/save",--%>
<%--                type: "POST",--%>
<%--                data: $("#addForm").serialize(),--%>
<%--                dataType: "json",--%>
<%--                success: function(res) {--%>
<%--                    if (res.flag) {--%>
<%--                        $("#addModal").modal('hide');--%>
<%--                        getData();--%>
<%--                    } else {--%>
<%--                        alert("保存失败");--%>
<%--                    }--%>
<%--                }--%>
<%--            });--%>
<%--        }--%>

<%--        // 打开编辑模态框--%>
<%--        function openEditModal(id) {--%>
<%--            $("#editModal").modal({ show: true });--%>
<%--            $.get(--%>
<%--                "${pageContext.request.contextPath}/houuser/getById",--%>
<%--                { "id": id },--%>
<%--                function(res) {--%>
<%--                    $("#editId").val(res.id);--%>
<%--                    $("#editUsername").val(res.u_name);--%>
<%--                    $("#editPassword").val(res.u_password);--%>
<%--                },--%>
<%--                "json"--%>
<%--            );--%>
<%--        }--%>

<%--        // 更新数据--%>
<%--        function update() {--%>
<%--            $.ajax({--%>
<%--                url: "${pageContext.request.contextPath}/houuser/update",--%>
<%--                type: "POST",--%>
<%--                data: $("#editForm").serialize(),--%>
<%--                dataType: "json",--%>
<%--                success: function(res) {--%>
<%--                    if (res.flag) {--%>
<%--                        $("#editModal").modal('hide');--%>
<%--                        getData();--%>
<%--                    } else {--%>
<%--                        alert("更新失败");--%>
<%--                    }--%>
<%--                }--%>
<%--            });--%>
<%--        }--%>

<%--        // 删除单个数据--%>
<%--        function deleteItem(id) {--%>
<%--            if (confirm("确认删除吗？")) {--%>
<%--                $.post(--%>
<%--                    "${pageContext.request.contextPath}/houuser/delete",--%>
<%--                    { "id": id },--%>
<%--                    function(res) {--%>
<%--                        if (res.flag) {--%>
<%--                            getData();--%>
<%--                        } else {--%>
<%--                            alert("删除失败");--%>
<%--                        }--%>
<%--                    },--%>
<%--                    "json"--%>
<%--                );--%>
<%--            }--%>
<%--        }--%>

<%--        // 批量删除--%>
<%--        function deleteSelected() {--%>
<%--            if (confirm("确认删除选中项吗？")) {--%>
<%--                var ids = [];--%>
<%--                $("#houuser-list tbody input").each(function() {--%>
<%--                    if ($(this).prop("checked")) {--%>
<%--                        ids.push($(this).val());--%>
<%--                    }--%>
<%--                });--%>
<%--                $.post(--%>
<%--                    "${pageContext.request.contextPath}/houuser/deleteBatch",--%>
<%--                    { "ids": ids.join(",") },--%>
<%--                    function(res) {--%>
<%--                        if (res.flag) {--%>
<%--                            getData();--%>
<%--                        } else {--%>
<%--                            alert("删除失败");--%>
<%--                        }--%>
<%--                    },--%>
<%--                    "json"--%>
<%--                );--%>
<%--            }--%>
<%--        }--%>

<%--        // 全选/取消全选--%>
<%--        $("#selectAll").click(function() {--%>
<%--            var checked = $(this).prop("checked");--%>
<%--            $("#houuser-list tbody input").prop("checked", checked);--%>
<%--        });--%>

<%--        // 初始化数据--%>
<%--        getData();--%>
<%--    </script>--%>
</body>
</html>

<script>
// 清空搜索框
function clearSearch() {
    document.getElementById("searchInput").value = "";
    document.getElementById("searchNickname").value = "";
    window.location.href = "${pageContext.request.contextPath}/houuser/list";
}
</script>